import React from 'react';
import { connect } from 'react-redux';
import { Form, Icon, Input, Button,Tooltip} from 'antd';
import { addUser,fetchUser,updateUser } from "../../../actions/usersActions";

const FormItem = Form.Item;
class AdminUserForm extends React.Component{
    componentDidMount(){
        const { params: { id }} = this.props;
        this.props.fetchUser(id).then(
        );
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
        if (!err) {
            if (!this.props.profile.id) {
                this.props.addUser(values).then(
                    (res) => { this.context.router.push('/admin/users')} ,
                    (err) => { this.setState({ errors: "", isLoading: false })}
                );
            }else {
                var new_data = {
                    id:this.props.profile.id,
                    ...values
                }
                this.props.updateUser(new_data).then();
            }
        }
        });
    }

    render(){
        const { profile } = this.props ;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                span: 14,
                offset: 6,
            },
        };

        return (
            <div className="input-form user-form">
                 <Form onSubmit={this.handleSubmit}>
                     <FormItem
                    {...formItemLayout}
                    label="E-mail"
                    hasFeedback
                    >
                    {getFieldDecorator('email', {
                        rules: [{
                        type: 'email', message: 'The input is not valid E-mail!',
                        }, {
                        required: true, message: 'Please input your E-mail!',
                        }],
                        initialValue: profile.email
                    })(
                        <Input />
                    )}
                    </FormItem>

                     <FormItem
                        {...formItemLayout}
                        label="Username"
                        hasFeedback
                        >
                    {getFieldDecorator('username', {
                        rules: [{
                        message: 'The input is not valid username!',
                        }, {
                        required: true, message: 'Please input your username!',
                        }],
                        initialValue: profile.username
                    })(
                        <Input />
                    )}
                    </FormItem>
                    
                    <FormItem
                    {...formItemLayout}
                    label={(
                        <span>
                        Nickname&nbsp;
                        <Tooltip title="What do you want other to call you?">
                            <Icon type="question-circle-o" />
                        </Tooltip>
                        </span>
                    )}
                    hasFeedback
                    >
                    {getFieldDecorator('nickname', {
                        rules: [{ required: true, message: 'Please input your nickname!' }],
                        initialValue: profile.nickname
                    })(
                        <Input />
                    )}
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="Password"
                    hasFeedback
                    >
                    {getFieldDecorator('password', {
                        rules: [{
                        required: true, message: 'Please input your password!',
                        }, {
                        validator: this.checkConfirm,
                        }],
                    })(
                        <Input type="password" onBlur={this.handlePasswordBlur} />
                    )}
                    </FormItem>
                    <FormItem {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit" size="large"  >提交</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

AdminUserForm.propTypes = {
    addUser: React.PropTypes.func.isRequired,
    fetchUser: React.PropTypes.func.isRequired,
    updateUser: React.PropTypes.func.isRequired,
};

AdminUserForm.contextTypes = {
  router: React.PropTypes.object.isRequired
}

const mapStateToProps = (state) => {
  return { 
      profile: state.user.profile,
  }
}
export default connect(mapStateToProps, {addUser,fetchUser,updateUser})(Form.create()(AdminUserForm));